﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <style>
       
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        img{
            width:50px;
            height:50px;
            margin-left:109px;
            margin-top:20px;
        }
        body{
            background-color:rgb(20,19,19);
            display:flex;
            height:100vh;
        }
        .bottle{
            margin:auto;
            width:300px;
            height:300px;
            background:#ffffff1a;
            border-radius:50%;
            position:relative;
            animation:animate linear 3s infinite;
            transform-origin:bottom center;
        }
        @keyframes animate{
            0%{
                transform:rotate(0);
            }
            25%{
                transform:rotate(15deg);
            }
            50%{
                transform:rotate(0);
            }
            75%{
                transform:rotate(-15deg);
            }
            100%{
                transform:rotate(0);
                filter:hue-rotate(360deg);
            }

        }
        .bottle::before{
            display:block;
            content:"";
            width:150px;
            height:60px;
            border-radius:70%;
            background:#505250;
            position:absolute;
            left:50%;
            top:-5px;
            transform:translate(-50%);
            box-shadow:0 10px 5px #000;
        }
        .water {
            background: #41c1fb;
            position: absolute;
            left: 10px;
            top: 50%;
            right: 10px;
            bottom: 10px;
            border-bottom-left-radius: 150px;
            border-bottom-right-radius: 150px;
            animation: animate linear 3s infinite;
            transform-origin:top center;
            filter:drop-shadow(0 0 80px #41c1fb);
        }
        @keyframes animates{
            0% {
                transform: rotate(0);
            }

            25% {
                transform: rotate(-15deg);
            }

            50% {
                transform: rotate(0);
            }

            75% {
                transform: rotate(15deg);
            }

            100% {
                transform: rotate(0);
            }
        }
        .water::before{
            display:block;
            content:"";
            width:100%;
            height:20px;
            background:#0da2e7;
            border-radius:50%;
            position:absolute;
            top:-10px;
        }
        .bottle-bottom{
            margin:auto;
            position:absolute;
            left:50%;
            top:calc(50%+150px);
            width:300px;
            height:30px;
            background:rgba(0,0,0,.5);
            transform:translate(-50%);
            border-radius:50%;
        }
        .deng1{
            font-size:60px;
            
        }
        .deng2 {
            font-size: 60px;
            position:absolute;
            top:0;
            right:0;
        }
        .deng3{
            font-size: 60px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .deng4 {
            font-size: 60px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
    <title>纪往灯</title>
</head>
<body>
    <div class="deng1">兔年大吉</div>
    <div class="deng2">吉兔高照</div>
    <div class="deng3">照兔办事</div>
    <div class="deng4">事半兔倍</div>
    <div class="bottle">
        <div class="water"></div>
    </div>
    <div class="bottle-bottom"></div>
</body>
</html>